import { Box, Typography } from '@mui/material';
import { useRouter } from 'next/router';

import { GFSButton } from '../components/shared/button/gfs-button';
import Routes from '../constants/routes';

const WrongWalletPage = () => {
    const router = useRouter();

    return (
        <>
            <style jsx global>{`
                .container-galaxy {
                    height: calc(100vh);
                    background-image: url(/galaxy-bg.svg);
                    background-size: cover;
                }

                .galaxy {
                    height: 100%;
                    background-image: url(/item.svg);
                    background-repeat: no-repeat;
                    background-position: center;
                    background-size: contain;
                }

                .content {
                    height: 100%;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;
                }
            `}</style>
            <Box className={'container-galaxy'}>
                <Box className={'content'}>
                    <Typography variant="h4" align="center">
                        Your wallet is not yet whitelisted
                    </Typography>
                    <GFSButton
                        variant="contained"
                        className={`mt-4`}
                        onClick={() => router.push(Routes.CONNECT_WALLET)}
                    >
                        Connect other wallet
                    </GFSButton>
                </Box>
            </Box>
        </>
    );
};

export default WrongWalletPage;
